import { defineComponent, watch, reactive, ref } from "vue";
import styles from "./PersInsureList.module.less";
import { useRoute, useRouter } from "vue-router";
import Breadcrumb from "@/components/public/Breadcrumb/Breadcrumb";
import LIcon from "@/components/public/lIcon/lIcon";
import { CheckSquareFilled } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const breadcrumbState = ref([
      () => <span class={styles['Breadcrumb-Home']} onClick={() => { router.push('/home') }}>首页</span>,
      () => <span class={styles['Breadcrumb-PersInsureList']}>特色保险</span>,
    ])

    const productListState = reactive({
      total: 41,
      page: 1,
      productType: [] as string[],
      company: [] as string[],
      list: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ]
    })

    watch(() => route.query.id, (nv) => {
      productListState.productType = [nv as string];
    }, {
      immediate: true,
      deep: true
    })

    // 产品分类
    const productTypeList = ref([
      {
        label: '境内旅游',
        value: '境内旅游',
      },
      {
        label: '特色保障',
        value: '特色保障',
      },
      {
        label: '户外运动',
        value: '户外运动',
      },
      {
        label: '交通安全',
        value: '交通安全',
      },
    ])

    // 承保公司
    const companyList = ref([
      {
        label: '大地',
        img: imgPath("/dadi.png"),
        value: '1',
      },
      {
        label: '华泰',
        img: imgPath("/huatai.jpg"),
        value: '2',
      },
      {
        label: '平安',
        img: imgPath("/pinan.png"),
        value: '3',
      },
      {
        label: '阳光',
        img: imgPath("/yangguang.png"),
        value: '4',
      },
    ])

    // 筛选
    const Filter = () => (
      <div class={styles.filter}>
        <div class={styles.container}>
          <div class={styles.result}>
            <div class={styles['result-label']}>产品筛选</div>
            <div class={styles['result-total']}>
              共<span>{productListState.total}</span>款产品
            </div>
            <div class={styles['filter-checked-list']}>
              {
                productListState.productType.map((item: any) => (
                  <div class={styles['filter-checked-item']}>
                    <span>{productTypeList.value.find(x => x.value === item)?.label || ''}</span>
                    <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { productListState.productType.splice(productListState.productType.findIndex(x => x === item), 1) }} />
                  </div>
                ))
              }
              {
                productListState.company.map((item: any) => (
                  <div class={styles['filter-checked-item']}>
                    <span>{companyList.value.find(x => x.value === item)?.label || ''}</span>
                    <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { productListState.company.splice(productListState.company.findIndex(x => x === item), 1) }} />
                  </div>
                ))
              }
            </div>
          </div>
          <div class={styles.line}></div>
          <div class={styles['product-type']}>
            <div class={styles['product-type-title']}>产品分类</div>
            <div class={styles['product-type-list']}>
              {
                productTypeList.value.map((item: any) => (
                  <div class={[styles['product-type-item'], productListState.productType.includes(item.value) && styles.checked]} onClick={() => { productListState.productType.includes(item.value) || productListState.productType.push(item.value) }}>{item.label}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['company']}>
            <div class={styles['company-title']}>承保公司</div>
            <div class={styles['company-list']}>
              {
                companyList.value.map((item: any) => (
                  <div class={[styles['company-item'], productListState.company.includes(item.value) && styles['img-checked']]} onClick={() => { productListState.company.includes(item.value) || productListState.company.push(item.value) }}>
                    <img src={item.img} />
                  </div>
                ))
              }
            </div>
          </div>
        </div>
      </div>
    )

    const toDetail = () => {
      router.push('/PersInsureDetail')
    }

    // 产品列表
    const GroupPlan = () => (
      <div class={styles['group-plan']}>
        {
          productListState.list.map((item) => (
            <div class={styles['group-plan-item']}>
              <div class={styles['product-title']}>全球签证旅游保险（互联网专属）方案一</div>
              <div class={styles['product-insured']}>
                <div class={styles['product-earmarks']}>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>意外伤害</span>
                  </div>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>疾病身故</span>
                  </div>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>医疗</span>
                  </div>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>旅行不便</span>
                  </div>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>签证拒签</span>
                  </div>
                  <div class={styles['product-earmark']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>紧急救援</span>
                  </div>
                </div>
                <div class={styles['detail-btn']} onClick={() => {toDetail()}}>查看详情</div>
              </div>
            </div>
          ))
        }
        <div class={styles.pagination}>
          <a-pagination v-model:current={productListState.page} total={productListState.total} />
        </div>
      </div>
    )

    return () => (
      <div class={styles.PersInsureList}>
        <Breadcrumb list={breadcrumbState.value} />
        <Filter />
        <GroupPlan />
      </div>
    )
  }
})